<template>
  <div>
    <el-button
      type="primary"
      size="small"
      style="margin-bottom: 20px"
      @click="visible = true"
    >增加停车计费规则</el-button>
    <custom-table
      :data="tableData"
      :columns="tableColumns"
      :total="total"
      :loading="loading"
      @changePage="handlerPageChange"
    >
      <!-- 自定义列模板 -->
      <template #operate="{ row }">
        <el-button type="text" @click="onEdit(row)">编辑</el-button>
        <el-button type="text" @click="onDel(row.id)">删除</el-button>
      </template>
      <template #chargeType="{ row }">
        <span v-if="row.chargeType==='duration'">时长收费</span>
        <span v-else-if="row.chargeType==='turn'">按次收费</span>
        <span v-else>分段收费</span>
      </template>
    </custom-table>
    <el-dialog :title="!ruleInfo.id?'添加计费规则':'编辑计费规则'" :visible.sync="visible" width="width">
      <el-form
        ref="form"
        :model="ruleInfo"
        label-position="top"
        :rules="rules"
      >
        <el-form-item label="计费规则编号" prop="ruleNumber">
          <el-input v-model="ruleInfo.ruleNumber" placeholder="请输入计费规则编号" />
        </el-form-item>
        <el-form-item label="计费规则名称" prop="ruleName">
          <el-input v-model="ruleInfo.ruleName" placeholder="请输入计费规则名称" />
        </el-form-item>
        <el-form-item label="计费方式(全天收费)" prop="chargeType">
          <el-radio-group v-model="ruleInfo.chargeType">
            <el-radio border label="duration">时长收费</el-radio>
            <el-radio border label="turn">按次收费</el-radio>
            <el-radio border label="partition">分段收费</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-row>
            <el-col :span="12">免费时长</el-col>
            <el-col :span="12">收费上限</el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-input-number v-model="ruleInfo.freeDuration" placeholder="请输入免费时长" controls-position="right" :min="1" style="width:95%" />
            </el-col>
            <el-col :span="2">分钟</el-col>
            <el-col :span="10">
              <el-input v-model="ruleInfo.chargeCeiling" placeholder="请输入收费上限" style="width:95%" />
            </el-col>
            <el-col :span="2">元</el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="计费规则" prop="chargeType">
          <el-row v-if="ruleInfo.chargeType==='duration'">
            <el-col :span="1">每</el-col>
            <el-col :span="6">
              <el-form-item prop="durationTime">
                <el-input-number v-model="ruleInfo.durationTime" controls-position="right" :min="1" style="width:90%" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-select v-model="ruleInfo.durationType" placeholder="请选择">
                <el-option
                  label="小时"
                  value="hour"
                />
                <el-option
                  label="分钟"
                  value="minute"
                />
              </el-select>
            </el-col>
            <el-col :span="5">
              <el-form-item prop="durationPrice">
                <el-input v-model="ruleInfo.durationPrice" placeholder="请输入" style="width:95%" />
              </el-form-item>
            </el-col>
            <el-col :span="2">元</el-col>

          </el-row>
          <el-row v-if="ruleInfo.chargeType==='turn'">
            <el-col :span="2">每次</el-col>
            <el-col :span="13">
              <el-form-item prop="turnPrice">
                <el-input v-model="ruleInfo.turnPrice" placeholder="请输入金额" />
              </el-form-item>
            </el-col>
            <el-col :span="2" style="padding-left:10px">元</el-col>
          </el-row>
          <el-row v-if="ruleInfo.chargeType==='partition'">
            <el-col :span="8">
              <el-form-item prop="partitionFrameTime">
                <el-input-number v-model="ruleInfo.partitionFrameTime" placeholder="请输入" controls-position="right" :min="1" style="width:95%" />
              </el-form-item>
            </el-col>
            <el-col :span="6">小时内, 每小时收费</el-col>
            <el-col :span="8">
              <el-form-item prop="partitionFramePrice">
                <el-input v-model="ruleInfo.partitionFramePrice" placeholder="请输入" style="width:90%" />
              </el-form-item>
            </el-col>
            <el-col :span="2">元</el-col>
          </el-row>
          <el-row v-if="ruleInfo.chargeType==='partition'" style="margin-top:20px">
            <el-col :span="2">每增加</el-col>
            <el-col :span="6">
              <el-form-item prop="partitionIncreaseTime">
                <el-input-number v-model="ruleInfo.partitionIncreaseTime" placeholder="请输入" controls-position="right" :min="1" style="width:95%" />
              </el-form-item>
            </el-col>
            <el-col :span="3">小时, 增加</el-col>
            <el-col :span="11">
              <el-form-item prop="partitionIncreasePrice">
                <el-input v-model="ruleInfo.partitionIncreasePrice" placeholder="请输入" style="width:95%" />
              </el-form-item>
            </el-col>
            <el-col :span="2">元</el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import CustomTable from '@/components/CustomTable.vue'
import { addRuleAPI, delRuleAPI, getRuleDetailAPI, getRuleListAPI, updateRuleAPI } from '@/api/rule'
import { onSecondConfirm } from '@/utils'
export default {
  components: { CustomTable },
  data() {
    return {
      visible: false,
      ruleInfo: {
        ruleNumber: '',
        ruleName: '',
        freeDuration: '',
        chargeCeiling: null,
        chargeType: 'duration', // 时长收费:duration,按次收费:turn,分段收费:partition
        durationTime: null,
        durationPrice: null,
        durationType: 'minute', // 时长收费类型 minute:分钟，hour:小时
        turnPrice: null,
        partitionFrameTime: null,
        partitionFramePrice: null,
        partitionIncreaseTime: null,
        partitionIncreasePrice: null
      },
      tableData: [],
      tableColumns: [
        { label: '计费规则编号', prop: 'ruleNumber' },
        { label: '计费规则名称', prop: 'ruleName' },
        { label: '免费时长（分钟）', prop: 'freeDuration' },
        { label: '收费上限（元）', prop: 'chargeCeiling' },
        { label: '计费方式', prop: 'chargeType', custom: true },
        { label: '计费规则', prop: 'ruleNameView' },
        { label: '操作', prop: 'operate', custom: true }
      ],
      rules: {
        ruleNumber: [{ required: true, message: '请输入计费规则编号', trigger: 'blur' }],
        ruleName: [{ required: true, message: '请输入计费规则名称', trigger: 'blur' }],
        chargeType: [{ required: true, message: ' ', trigger: 'blur' }],
        durationTime: [{ required: true, message: '请输入计费时间', trigger: 'blur' }],
        durationPrice: [{ required: true, message: '请输入计费金额', trigger: 'blur' }],
        durationType: [{ required: true, message: '请输入计费时间单位', trigger: 'blur' }],
        turnPrice: [{ required: true, message: '请输入计费金额', trigger: 'blur' }],
        partitionFrameTime: [{ required: true, message: '请输入计费时间', trigger: 'blur' }],
        partitionFramePrice: [{ required: true, message: '请输入计费金额', trigger: 'blur' }],
        partitionIncreaseTime: [{ required: true, message: '请输入计费时间', trigger: 'blur' }],
        partitionIncreasePrice: [{ required: true, message: '请输入计费金额', trigger: 'blur' }]
      },
      pageParams: {
        page: 1,
        pageSize: 10
      },
      total: 0,
      loading: false
    }
  },
  watch: {
    'ruleInfo.chargeType'(val) {
      // 切换时清空校验信息 和重置其他项
      val !== 'duration' && this.$refs.form.clearValidate('durationTime')
      val !== 'turn' && this.$refs.form.clearValidate('turnPrice')
    },

    visible(val) {
      if (val === false) {
        this.$refs.form.resetFields()
        this.ruleInfo = {
          ruleNumber: '',
          ruleName: '',
          freeDuration: '',
          chargeCeiling: null,
          chargeType: 'duration', // 时长收费:duration,按次收费:turn,分段收费:partition
          durationTime: null,
          durationPrice: null,
          durationType: 'minute', // 时长收费类型 minute:分钟，hour:小时
          turnPrice: null,
          partitionFrameTime: null,
          partitionFramePrice: null,
          partitionIncreaseTime: null,
          partitionIncreasePrice: null
        }
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async onEdit(row) {
      // 准备回填数据
      this.ruleInfo = await getRuleDetailAPI(row.id)
      this.visible = true
    },
    async onSubmit() {
      // 校验通过
      await this.$refs.form.validate()
      if (this.ruleInfo.id) {
        await updateRuleAPI(this.ruleInfo)
        this.$message.success('编辑成功!')
      } else {
        // 调api
        await addRuleAPI(this.ruleInfo)
        // 提示用户
        this.$message.success('添加成功!')
      }
      // 刷新列表
      this.getList()
      // 清空表单
      this.visible = false
    },
    onDel(id) {
      onSecondConfirm({
        content: '是否确认删除当前计费规则?',
        handler: async() => {
          await delRuleAPI(id)
          this.$message.success('删除成功!')
          this.getList()
        }
      })
    },
    handlerPageChange(value) {
      this.pageParams = value
      this.getList()
    },
    async getList() {
      this.loading = true
      const res = await getRuleListAPI(this.pageParams)
      this.tableData = res.rows
      this.total = res.rows.length
      this.loading = false
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
  text-align: left;
}
</style>
